<script setup>
import {ElMessage, genFileId, uploadProps} from 'element-plus';
import { ref } from 'vue';
import store from "@/store/index.js";

    const visible = defineModel()
    const upload = ref(null)

    const emit = defineEmits(['transfer','success'])

    const submit = () => {
        upload.value.submit()
    }

    const handleExceed = (files) => {
        console.log(files)
        upload.value.clearFiles()
        const file = files[0]
        file.uid = genFileId()
        upload.value.handleStart(file)
    }

    const handleSuccess = (res) => {
        console.log(res)
        if(res.code === 200){
            ElMessage({
                message: res.msg,
                type: 'success'
            })
            emit('success')
            visible.value = false
        }
    }
</script>
<template>
    <div>
        <el-dialog v-model="visible" title="导入表格">
            <el-upload
                ref="upload"
                class="upload-demo"
                drag
                action="/api/user/excel"
                :limit="1"
                :auto-upload="false"
                method="post"
                :on-exceed="handleExceed"
                :on-success="handleSuccess"
                accept=".xlsx,.xls"
            >
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">
                    拖拽文件至此处，或点击选择文件
                </div>
                <template #tip>
                    <div class="el-upload__tip">
                        仅支持excel表格文件，且仅能选择单文件！
                    </div>
                </template>
            </el-upload>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="visible = false" style="padding: 0 16px;">取消</el-button>
                    <el-button type="primary" @click="submit" :loading="store.state.loaded" style="padding: 0 16px;">确认</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<style lang="scss" scoped>
    .upload{
        margin-left: 12px;
    }
</style>
